<template>
	<view class="background register">
		
			<view class="img">
				<image src="../../../static/images2/login/logo.png" mode=""></image>
			</view>
			<view class="formData">
				<formData :values="values" :fields="fields" :rules="rules" ref="FormData" labelAlign="left">
				</formData>
			</view>
			
			
			<view class="button_error d-f-j-c-a-i " @click="register">
				注册
			</view>
			<view class="bottom">
				<u-checkbox-group active-color="#3775F6">
					<u-checkbox v-model="checked" class="checkbox" size="24" label-size="24">已同意并阅读</u-checkbox>
				</u-checkbox-group>
				<view class="tips" @click="treaty">
					《用户协议与隐私政策》
				</view>
				<view class="login" @click="pathLogin">
					登录
				</view>
			</view>
	
		<u-toast ref="uToast"></u-toast>
	</view>
</template>


<script>
	import FormData from '@/components/form/index'
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				checked: false,
				x: 600,
				y: 600,
				content: [{
						text: '111',
					},
					{
						text: '222',
					},
				]
			}
		},
		components: {
			FormData
		},
		methods: {
			...mapActions({
				registerLogin: 'LOGIN/REGISTER_LOGIN' //注册
			}),
			treaty() {
				uni.navigateTo({
					url: '/pages/loanee/login/register',
				})
			},
			onChange(e) {
				this.x = e.detail.x
				this.y = e.detail.y
			},
			register() {
								
				let flag = this.$refs.FormData.submit()
				if (flag) {
					if (this.values.password != this.values.queryPassword) {
						this.$u.toast('两次密码不一致');
						return
					}
					if (!this.checked) {
						this.$u.toast('请阅读用户协议与隐私政策');
						return
					}
					    uni.showLoading({
            title: "加载中",
          });
					this.registerLogin()
				}
			},
			pathLogin(){
				  uni.navigateTo({
				      url: '/pages/loanee/login/index'
				  });   
				// let _this=this
				// uni.setTabBarItem({
				//     index: 0,
				//     text: '债务人登录'
				// });
				// uni.setNavigationBarTitle({
				//     title: '债务人登录',
				// 	success: () => {
						
				// 	}
				// });	
			}
		},
		mounted() {
		    uni.removeStorageSync('token');	
		},
		watch: {

		},
		computed: {
			...mapState({
				fields: (state) => state.LOGIN.fields,
				values: (state) => state.LOGIN.values,
				rules: (state) => state.LOGIN.rules,
			})
		},

		onLoad() {


		}
	}
</script>

<style scoped lang='scss'>
	.img {
		width: 100%;
		height: 352rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		uni-image {
			width: 160rpx;
			height: 160rpx;
		}
	}

	.formData {
		width: 100%;
		min-height: 796rpx;
		padding: 0rpx 32rpx;
	}
	
	.form2 {
		width: 100%;
		padding: 0rpx 32rpx;
	}

	.background {
		background: linear-gradient(180deg, #E0EDFF 0%, #FFFFFF 40%, #FFFFFF 100%);
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 100%;
	}


	.button_error {
		width: 686rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #4A8FF9 0%, #409AFF 100%);
		border-radius: 100rpx;
		font-size: 32rpx;
		color: #FFF;
		margin-top: 94rpx;
	}

	.bottom {
		margin-top: 86rpx;
		display: flex;
		width: 686rpx;
		position: relative;
		padding-bottom: 68rpx;
	}

	.tips {
		height: 44rpx;
		font-size: 24rpx;
		color: #0862E8;
		margin-top: 10rpx;
	}

	.login {
		height: 44rpx;
		font-size: 32rpx;
		color: #0862E8;
		position: absolute;
		right: 0rpx;
	}
	
	.register {
		/deep/ {
			
			.u-checkbox__label {
				margin-right: 8rpx;
				color: #999;
			}
		}
	}
</style>
/* <style>
	.uni-app--maxwidth {
		background-color: #FFFFFF !important;
	}
</style> */
